<template>
  <div id="app">
    <el-container>
      <el-header>
        <div style="width: 100%">
          <pilot-component/>
        </div>
      </el-header>
      <el-container>
        <el-aside width="18%">
          <aside-component/>
        </el-aside>
        <el-container>
          <el-main>
            <home-page-content-component/>
          </el-main>
          <el-footer>
            <FooterComponent/>

          </el-footer>
        </el-container>
      </el-container>
    </el-container>


  </div>

</template>

<script>
import FooterComponent from "@/components/footer/FooterComponent";
export default {
  name: "HomePage",
  components:{
    FooterComponent,
    PilotComponent,
    HomePageContentComponent,
    AsideComponent
  },
  props:{

  },
  data(){
    return{
      drawer: false,
      direction: 'rtl'
    }
  },methods:{

  },watch:{

  },computed:{
    count:{
      get(){
        return this.$store.state.count;
      },
      set(newValue){
        this.$store.state.count=newValue
      }
    }
  }
}
import PilotComponent from '../components/pilot/PilotComponent'
import AsideComponent from '../components/aside/AsideComponent'
import HomePageContentComponent from '../components/content/HomePageContentComponent'
</script>

<style scoped>
 .el-footer {

  color: #333;
  text-align: center;
}

.el-aside {
  /*background-color: #D3DCE6;*/
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  /*line-height: 160px;*/
}


.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.InfoPageClass{
  background-color: #42b983;
  min-height: 30rem;
}

</style>